<script src="../lib/jquery.js"></script>
<script>
// $.each() is a generic iterator function for looping over object, arrays, 
// and array-like objects. Plain objects are iterated via their named properties 
// while arrays and array-like objects are iterated via their indices.
$(function(){
	var sum = 0;	 
	var arr = [ 1, 2, 3, 4, 5 ];
	for ( var i = 0, l = arr.length; i < l; i++ ) {
	    sum += arr[ i ];
	}	 
	console.log( sum ); // 15
	
	// Can be replaced with this:
	var sum = 0;
	$.each( arr, function( index, value ){
	    sum += value;
	});	 
	console.log( sum ); // 15
	
	
	
	// In addition, given:
	var sum = 0;
	var obj = {
	    foo: 1,
	    bar: 2
	}
	
	for (var item in obj) {
	    sum += obj[ item ];
	}	 
	console.log( sum ); // 3
	
	// Can be replaced with this:
	var sum = 0;
	$.each( obj, function( key, value ) {
	    sum += value;
	});	 
	console.log( sum ); // 3
	
	
	
	// .each(): Note that $.each() is for plain objects, arrays, array-like objects 
	// that are not jQuery collections. For jQuery collections, use .each().
	$( "li" ).each( function( index, element ){
	    console.log( $( this ).text() );
	});
	
	// For example, these are equivalent:
	$( "input" ).each( function( i, el ) {
	    var elem = $( el );
	    elem.val( elem.val() + "%" );
	});
	 
	$( "input" ).val(function( index, value ) {
	    return value + "%";
	});
	
	
	
	// .map(): Anytime we want to create an array or concatenated string based 
	// on all matched elements in our jQuery selector, we're better served using .map().
	var newArr = [];	 
	$( "li" ).each( function() {
	    newArr.push( this.id );
	});
	
	// Notice the .get() chained at the end. .map() actually returns a jQuery
	// -wrapped collection, even if we return strings out of the callback.
	// We need to use the argument-less version of .get() in order to return a basic JavaScript array that we can work with.
	// To concatenate into a string, we can chain the plain JS .join() array method after .get().
	console.log(
		$( "li" ).map( function(index, element) {
		    return this.id;
		}).get()
	);
	
	
	
	// $.map() works on plain JavaScript arrays while .map() works on jQuery element collections. 
	// Because it's working on a plain array, $.map() returns a plain array and .get() does not need to be called
	var arr = [{
	    id: "a",
	    tagName: "li"
	}, {
	    id: "b",
	    tagName: "li"
	}, {
	    id: "c",
	    tagName: "li"
	}];
	 
	// Returns [ "a", "b", "c" ]
	console.log(
		$( "li" ).map( function( index, element ) {
		    return element.id;
		}).get()
	);
	 
	// Also returns ["a", "b", "c"]
	// Note that the value comes first with $.map
	console.log(
		$.map( arr, function( value, index ) {
		    return value.id;
		})
	);
});
</script>

<ul>
    <li id="a"><a href="#">Link 1</a></li>
    <li id="b"><a href="#">Link 2</a></li>
    <li id="c"><a href="#">Link 3</a></li>
</ul>

<form><input type="text" value="hello"/></form>